<template>
  <div style="background: #eee">
    <van-nav-bar title="个人信息页" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" style="color: #000; font-size: 24px" />
      </template>
    </van-nav-bar>
    <van-cell style="display: flex; align-items: center; margin-top: 5px">
      <template #title> 头像 </template>
      <template #right-icon>
        <div style="display: flex; align-items: center">
          <img
            :src="userImg"
            alt=""
            style="width: 50px; height: 50px; border: 1px solid #eee; margin: 5px"
          />
        </div>
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="router.push('/nickname')" title="昵称" is-link :value="nickname"></van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="gotogender">
      <template #title> 性别 </template>
      <template #right-icon>
        <img src="../../images/iconGirl.png" alt="" v-if="sex == '女'" />
        <img src="../../images/iconBoy.png" alt="" v-else />
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="router.push('/signs')">
      <template #title> 体征 </template>
      <template #right-icon>
        <div class="hhh">
          <div>{{ height ? height : '身高'}}cm</div>
          <div>{{ weight ? weight : '体重'}}kg</div>
          <div>{{ age ? age : '年龄'}}</div>
        </div>
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px">
      <template #title> 邮箱 </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px">
      <template #title> 绑定微信 </template>
      <template #right-icon>
        去绑定
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px">
      <template #title> 实名认证 </template>
      <template #right-icon>
        去认证
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="gotoBangding">
      <template #title> 绑定银行卡 </template>
      <template #right-icon>
        去绑定
        <van-icon name="arrow" />
      </template>
    </van-cell>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';

// 昵称
const user = ref(JSON.parse(localStorage.getItem('userInfo')) || '');
const nickname = user.value.username;

// 性别
const sex = ref(localStorage.getItem('sex') || '');

// 体征
const signs = ref(JSON.parse(localStorage.getItem('signsData')) || '');
const height = signs.value.height;
const weight = signs.value.weight;
const age = signs.value.age;


const router=useRouter()
const gotoBangding=()=>{
    router.push("/binding")
}
const onClickLeft = () => {
  router.push('/manage')
}
const gotogender=()=>{
    router.push("/gender")
}
const userImg = JSON.parse(localStorage.getItem('userInfo') as string).avator
</script>

<style>
@import './bank.scss';
</style>